
import { TioContext } from "@/comps/ctx/TioContext";
import High from "@/comps/High";
import * as bs from "@/comps/ws/bs";
import { Button, Space, Alert } from '@arco-design/web-react';
import React, { useContext, useEffect, useState } from "react";
import { log, info, warn, error } from "@/util/tio"

import { useDispatch, useSelector } from "react-redux";
import { selectRoot } from "@/store/rootSlice";
import WsComp, { tws } from "@/comps/ws/WsComp";

function WsDemo(props) {
  const root = useSelector(selectRoot);
  const dispatch = useDispatch();


  const connect = () => {
    tws.connect();
    log('tws.close()')
  }
  const disconnect = () => {
    tws.disconnect()
  }
  const destroy = () => {
    tws.destroy();
    log('tws.close()')
  }

  return (
    <>
      <Space wrap>
        <Button type='primary' onClick={connect} >
          连 接
        </Button>
        <Button type='secondary' onClick={disconnect} >
          断开连接
        </Button>
        <Button type='secondary' onClick={destroy} >
          销毁连接
        </Button>
      </Space>
      <Alert content={<>注意比较【<span className="text-red-600">断开连接：后续会自动重连</span>】和【<span className="text-red-600">销毁连接：不再自动连接</span>】的区别</>} />

      <High language="json" showLineNumbers>
        {JSON.stringify(root.twsstate, null, 2)}
      </High>
    </>
  );
}
export default WsDemo;
